<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="mainMenu.title"/></title>
    <meta name="heading" content="<fmt:message key='mainMenu.heading'/>"/>
    <meta name="menu" content="MainMenu"/>
    <script type="text/javascript">
$(document).ready(function() {
	   // do stuff when DOM is ready
	   $("a").click(function() {
		     alert("Hello world! jquery");
		   });
		
	   $('#slideshow').cycle({ 
		    delay:  1000, 
		    speed:  1000,
		    pause:  1, 
		    before: onBefore
		    
		}); 
		/*
		
		$.fn.cycle.defaults = { 
    timeout:       4000,  // milliseconds between slide transitions (0 to disable auto advance) 
    speed:         1000,  // speed of the transition (any valid fx speed value) 
    next:          null,  // id of element to use as click trigger for next slide 
    prev:          null,  // id of element to use as click trigger for previous slide 
    before:        null,  // transition callback (scope set to element to be shown) 
    after:         null,  // transition callback (scope set to element that was shown) 
    height:       'auto', // container height 
    sync:          1,     // true if in/out transitions should occur simultaneously 
    fit:           0,     // force slides to fit container 
    pause:         0,     // true to enable "pause on hover" 
    delay:         0,     // additional delay (in ms) for first transition (hint: can be negative) 
    slideExpr:     null   // expression for selecting slides (if something other than all children is required) 
}; 
		*/
	    //$('#slideshow').cycle();
	 });

function onBefore() { 
    //$('#title').html(this.alt); 
}; 
</script>
<style type="text/css">
div#slideshow{
	border:1px solid red;
	height:300px;
	padding:10px;
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	width:450px;
	float:left;
	clear:both;
}
div#slideshow img{
	width:450px;
}
div.slide_image{
	padding:10px;
}

div#latest_news{
	float:right;
	width: 250px;
	border:1px solid green;
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
}
div#latest_news ul{
	list-style-type:none;
	padding:10px;
}

div#last_news{
	clear:both;
	border:1px solid blue;
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
}

</style>

</head>


<body>



	<div id="content">
		prova
		
		<div id="slideshow">
			<div class="slide_image" id="img1"><img src="images/virtus/4.jpg"/></div>
			<div class="slide_image" id="img2"><img src="images/virtus/5.jpg"/></div>
			<div class="slide_image" id="img3"><img src="images/virtus/6.jpg"/></div>
		</div>
		
		<div id="latest_news">
			<ul>
			<c:forEach var="new" items="${news}">
				<li>
					<span class="date_news">
						<fmt:formatDate value="${new.datecreation}" pattern="dd-MM-yyyy" />
					</span>
					<span class="title_news">
						${new.title}
					</span>
				</li>
			</c:forEach>
				<li><span class="date_news">10/3/2009</span><span class="title_news">Fondazione sito</span></li>
				<li><span class="date_news">10/3/2009</span><span class="title_news">Fondazione sito</span></li>
				<li><span class="date_news">10/3/2009</span><span class="title_news">Fondazione sito</span></li>
				<li><span class="date_news">10/3/2009</span><span class="title_news">Fondazione sito</span></li>
				<li><span class="date_news">10/3/2009</span><span class="title_news">Fondazione sito</span></li>
			</ul>
		</div>
		
		<div id="last_news">
			
			
			<c:forEach var="team" items="${teams}">
				${team.id}-${team.label}-${team.sex}-${team.seasonid}<br/>
			</c:forEach>
		</div>
		
	</div>


</body>
